<ng-container *ngIf="tagData&&tagData.data.length>0">
  <ng-container *ngIf="tagData.style==='filter-upAndDown-style'">
    <div>
      <div class="topBox" *ngIf="tagData.topRightTab&&tagData.label">
        <div class="topLeft" [innerHTML]="tagData.label|escapeFilter"></div>
        <div class="topRight">
          <span [ngClass]="{'sortCheck': isDefault,'sortUnCheck': !isDefault}" appDebounceClick (debounceClick)="sort(tagData.topRightTab[0].params)">{{tagData.topRightTab[0].label}}</span>
          <div class="spLine"></div>
          <span [ngClass]="{'sortUnCheck': isDefault,'sortCheck': !isDefault}" appDebounceClick (debounceClick)="sort(tagData.topRightTab[1].params)">{{tagData.topRightTab[1].label}}</span>
        </div>
      </div>
      <!-- [scrollable]="true"-->
      <ion-segment [ngStyle]="tagData.cssType|styleFilter" #switchBlockSegment (ionChange)="segmentChanged($event)" [(ngModel)]="selectedSegment" [scrollable]="true">
        <ion-segment-button id="ionseg-switchBlock{{i}}" *ngFor="let item of tagData.data;let j=index;" [value]="j">
          <span style="border-radius: 1.13rem;
        border: 0.03rem solid #B6B9BF;padding:0.38rem 0.75rem;font-size: 0.75rem;margin-right: 0.75rem;" [ngStyle]="item.cssStyle|styleFilter">{{item.label}}</span>
        </ion-segment-button>
      </ion-segment>
    </div>
  </ng-container>
  <ng-container *ngIf="tagData.style!=='filter-upAndDown-style'">
    <div id="{{switchBlockButtonId}}" class="switch-main-box 2" [ngStyle]="mainBoxCssStyle | styleFilter">
      <div class="switch-box 1" [ngStyle]="tagData.cssType | styleFilter">


        <ng-container *ngIf="tagData.style==='newStyle'; else normalBoxButtonTemplate">
          <div id="{{segmentId}}" [ngStyle]="tagData.cssType|styleFilter" class="newStyleSegment">
            <ng-container *ngFor="let item of tagData.data;let dateIndex = index;">
              <ng-container *ngIf="currentSegmentIndex===dateIndex; else elseNormalTemplate">
                <span class="checkedSegmentBtn" [ngStyle]="item.checkedCssStyle|styleFilter" appDebounceClick (debounceClick)="switchSegment(item,segmentId,dateIndex)">{{item.label}}</span>
              </ng-container>
              <ng-template #elseNormalTemplate>
                <span class="normalSegmentBtn" [ngStyle]="item.cssStyle|styleFilter" appDebounceClick (debounceClick)="switchSegment(item,segmentId,dateIndex)">{{item.label}}</span>
              </ng-template>
            </ng-container>
          </div>
        </ng-container>
        <ng-template #normalBoxButtonTemplate>
          <ng-container *ngFor="let item of tagData.data;let dateIndex = index;">
            <ng-container *ngIf="tagData.style==='oneCss'">
              <div id="{{item.id}}" class="home-switch-box-button-oneCss0" appDebounceClick (debounceClick)="switchBlockClick(item,'oneCss',dateIndex)" [ngStyle]="item.cssStyle|styleFilter" [ngClass]="{'switch-checked-oneCss':item.selected==='true'}">
                <ng-container *ngIf="item.selected==='true'; else checkLabelCssTemplate">
                  <p class="home-switch-box-label-oneCss0 " [ngStyle]="item?.labelCheckCssStyle|styleFilter">
                    {{item.label}}
                    <img *ngIf="item.arrowIcon" class="arrowIcon" [src]="item.arrowIcon" onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1662691090351136474f1f40526942f6938c174a3cac0.png'" [ngStyle]="item.arrowIconCssStyle|styleFilter" />
                  </p>
                </ng-container>
                <ng-template #checkLabelCssTemplate>
                  <p class="home-switch-box-label-oneCss0" [ngStyle]="item?.labelCssStyle|styleFilter">{{item.label}}
                    <img *ngIf="item.arrowIcon" class="arrowIcon" [src]="item.arrowIcon" onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1662691090351136474f1f40526942f6938c174a3cac0.png'" [ngStyle]="item.arrowIconCssStyle|styleFilter" />
                  </p>
                </ng-template>
              </div>
            </ng-container>
            <ng-container *ngIf="tagData.style==='twoCss'">
              <div id="{{item.id}}" class="home-switch-box-button-twoCss0" appDebounceClick (debounceClick)="switchBlockClick(item,'twoCss',dateIndex)" [ngStyle]="item.cssStyle|styleFilter" [ngClass]="{'switch-checked-twoCss':item.selected==='true'}">
                <p class="home-switch-box-label-twoCss0" [ngStyle]="item.labelCssStyle|styleFilter" [ngClass]="{'home-checked-font-twoCss': item.selected==='true'}">
                  {{item.label}}</p>
              </div>
            </ng-container>
            <ng-container *ngIf="tagData.style==='threeCss'">
              <div id="{{item.id}}" class="home-switch-box-button-threeCss0" appDebounceClick (debounceClick)="switchBlockClick(item,'threeCss',dateIndex)" [ngStyle]="item.cssStyle|styleFilter" [ngClass]="{'switch-checked-threeCss':item.selected==='true'}">
                <p class="home-switch-box-label-threeCss0" [ngStyle]="item.labelCssStyle|styleFilter" [ngClass]="{'home-checked-font-threeCss': item.selected==='true'}">
                  {{item.label}}</p>
              </div>
            </ng-container>
            <ng-container *ngIf="tagData.style==='fourthCss'">
              <div id="{{item.id}}" class="home-switch-box-button-fourthCss0" appDebounceClick (debounceClick)="switchBlockClick(item,'fourthCss',dateIndex)" [ngStyle]="item.cssStyle|styleFilter" [ngClass]="{'switch-checked-fourthCss':item.selected==='true'}">
                <p class="home-switch-box-label-fourthCss0" [ngStyle]="item.labelCssStyle|styleFilter" [ngClass]="{'home-checked-font-fourthCss': item.selected==='true'}">
                  {{item.label}}</p>
                <div class="slider-Div sliderbox1" [ngClass]="{'sliderbox': item.selected==='true'}"></div>
              </div>
            </ng-container>
            <ng-container *ngIf="tagData.style==='fifthCss'">
              <div id="{{item.id}}" class="home-switch-box-button-oneCss0" appDebounceClick (debounceClick)="switchBlockClick(item,'oneCss',dateIndex)" [ngStyle]="item.cssStyle|styleFilter" [ngClass]="{'switch-checked-fifthCss':item.selected==='true'}">
                <ng-container *ngIf="item.selected==='true'; else checkLabelCssTemplate">
                  <p class="home-switch-box-label-fifthCss0 home-checked-font-fifthCss" [ngStyle]="item?.labelCheckCssStyle|styleFilter">
                    {{item.label}}
                    <img *ngIf="item.arrowIcon" class="arrowIcon" [src]="item.arrowIcon" onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1662691090351136474f1f40526942f6938c174a3cac0.png'" [ngStyle]="item.arrowIconCssStyle|styleFilter" />
                  </p>
                </ng-container>
                <ng-template #checkLabelCssTemplate>
                  <p class="home-switch-box-label-fifthCss0" [ngStyle]="item?.labelCssStyle|styleFilter">{{item.label}}
                    <img *ngIf="item.arrowIcon" class="arrowIcon" [src]="item.arrowIcon" onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1662691090351136474f1f40526942f6938c174a3cac0.png'" [ngStyle]="item.arrowIconCssStyle|styleFilter" />
                  </p>
                </ng-template>
              </div>
            </ng-container>
          </ng-container>
        </ng-template>
        <div class="empty-box" *ngIf="tagData.data.length>0&&!tagData.data[0].params.hiddenEmptyBox">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

      </div>
      <!--如果没有在第一个params里面配置hiddenBlockButton则显示过滤div-->
      <div class="switch-block2" *ngIf="tagData.data.length>0&&!tagData.data[0].params.hiddenBlockButton"></div>
      <div class="switch-block1" *ngIf="tagData.data.length>0&&!tagData.data[0].params.hiddenBlockButton">
        <ng-container *ngIf="tagData.link">
          {{tagData.link?.label}}
          <img src="tagData.link?.iconUrl">
        </ng-container>
      </div>
    </div>

    <!--时间控件-->
    <div *ngIf="dateFilterBoxCssStyle&&showDateFilter" class="dateFilter" [ngStyle]="dateFilterBoxCssStyle | styleFilter">
      <div class="startDate" [ngStyle]="startDateBoxCssStyle | styleFilter">
        <ListItem DatePicker [showErrorToast]=false [maxDate]="getDateTime()" [minDate]="getDateTime(startDate.data.experience.min)" [mode]="startDate.data.experience.mode" [(ngModel)]="startDate.data.experience.defValue" name="startDateValue" [ngModelOptions]="{standalone: true}" [locale]="locale" (onOk)="datetime($event,startDate.data.experience,1)" [className]="startDate.data.experience.value ? 'select-checked' : 'select-default'">
          <!-- {{startDateLabel}} -->
          <p class="startDateInnerBox" [ngStyle]="startDateInnerBoxCssStyle|styleFilter">
            <span class="dateLabel" [ngStyle]="startDateLabelCssStyle|styleFilter">{{startDateLabel}}</span>
            <span class="dateValue" [ngStyle]="startDateValueCssStyle|styleFilter">{{startDateValue}}
              <img class="startDateArrowIcon" [src]="startDateArrowIcon" onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1671442774104afb25e87ab1a132e2b733410f82d3781.png'" [ngStyle]="startDateArrowIconCssStyle|styleFilter" />
            </span>

          </p>
        </ListItem>
      </div>
      <div class="endDate" [ngStyle]="endDateBoxCssStyle | styleFilter">
        <ListItem DatePicker [showErrorToast]=false [maxDate]="getDateTime()" [minDate]="getDateTime(endDate.data.experience.min)" [mode]="endDate.data.experience.mode" [(ngModel)]="endDate.data.experience.defValue" name="endDateValue" [ngModelOptions]="{standalone: true}" [locale]="locale" (onOk)="datetime($event,endDate.data.experience,2)" [className]="endDate.data.experience.value ? 'select-checked' : 'select-default'">
          <!-- {{endDateLabel}} -->
          <p class="startDateInnerBox" [ngStyle]="endDateInnerBoxCssStyle|styleFilter">
            <span class="dateLabel" *ngIf="endDateLabel" [ngStyle]="endDateLabelCssStyle|styleFilter">{{endDateLabel}}</span>
            <span class="dateValue" [ngStyle]="endDateValueCssStyle|styleFilter">
              {{endDateValue}}
              <img class="startDateArrowIcon" [src]="endDateArrowIcon" onerror="this.src='https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1671442774104afb25e87ab1a132e2b733410f82d3781.png'" [ngStyle]="endDateArrowIconCssStyle|styleFilter" />
            </span>
          </p>
        </ListItem>
      </div>
    </div>
  </ng-container>
</ng-container>
<!-- <input type="hidden" id="{{switchBlockButtonId}}" name="{{switchBlockButtonId}}" value=""> -->